<template>
	<view class="container">
		<u-navbar leftText="编辑资料" @leftClick="appFinish" leftIconColor="#1D2129" bgColor="transparent">
			<view class="u-nav-slot" slot="right">
				<view class="nav-left-text" @click="submitForm">
					保存
				</view>
			</view>
		</u-navbar>

		<view class="form_container">
			<view class="form_box">
				<u-form ref="form" labelPosition="left" :rules="rules" :model="formData" labelWidth="auto"
					:labelStyle="labelStyle">
					<template>
						<u-form-item label="头像" prop="avatar" key="avatar" class="custom_item" @click="showAvatarPop(formData.avatar)">
							<view class="avatar-form-item">
								<u-avatar class="avatar-box" :src="formData.avatar"></u-avatar>
							</view>
							<u-icon name="arrow-right" color="#cccccc" class="rightIcon"></u-icon>
						</u-form-item>
						<view class="divider"></view>
						<u-form-item label="昵称" prop="name" key="name" class="custom_item" @click="showNamePop()">
							<u--input v-model="formData.name" placeholder="请输入昵称" readonly border="none" inputAlign="right">
							</u--input>
							<u-icon name="arrow-right" color="#cccccc" class="rightIcon"></u-icon>
						</u-form-item>
						<view class="divider"></view>
						<u-form-item label="手机号码" prop="phoneNum" key="phoneNum" class="custom_item" @click="showPhonePop()">
							<u--input v-model="formData.phoneNum" placeholder="请输入手机号码" readonly border="none" inputAlign="right">
							</u--input>
							
							<u-icon name="arrow-right" color="#cccccc" style="opacity: 0;" class="rightIcon"></u-icon>
						</u-form-item>
				
					</template>
				</u-form>
			</view>
			<view v-if="isShowAvatarPop" class="">
			<u-popup :show="isShowAvatarPop" round="10" @close="closeAvatarPop" mode="bottom">
				<view class="pop-container">
					<view class="avatar-pop-box">
						<view class="pop-item" @click="choosePic(1)">
							拍照
						</view>
						<view class="pop-item" @click="choosePic(2)">
							从手机相册选择
						</view>
					</view>
					<view class="pop-cancel-item" @click="closeAvatarPop">
						取消
					</view>
				</view>
			</u-popup>
			</view>
			
			<bindPhonePop ref="bindPhonePopRef" :isShowPhonePop="isShowPhonePop" @closePhonePop="closePhonePop"
				@getUserInfo="getUserInfo"></bindPhonePop>
			<bindNamePop  :isShowNamePop="isShowNamePop" @closeNamePop="closeNamePop" @confirmNamePop="confirmNamePop">
			</bindNamePop>
			
			<view v-if="isShowAvatarPop" class="previewImg-box">
				<img mode="aspectFit" :src="formData.avatar" alt="" />
				<!-- <image :src="formData.avatar" mode="aspectFit"></image> -->
			</view>

		</view>
		<view>



		</view>

	</view>
</template>

<script>
import {
	txCosUpload
} from '@/utils/txCosUpload'
import bindPhonePop from './components/bindPhonePop.vue'
import bindNamePop from './components/bindNamePop.vue'
export default {
	components: {
		bindPhonePop,
		bindNamePop
	},
	data() {
		return {
			isShowNamePop: false,
			isShowAvatarPop: false,
			isShowPhonePop: false,
			tabs: [{
				name: '企业认证'
			},
			{
				name: '个人认证'
			}
			],
			labelStyle: {
				letterSpacing: '1px',
				marginLeft: '10px',
			},
			formData: {
				avatar: '/static/image/avatar.png',
				name: '',
				phoneNum: ''
			},
			rules: {
				avatar: [{
					required: true,
					message: '请上传头像',
					trigger: 'blur'
				}],
				name: [{
					required: true,
					message: '请输入昵称',
					trigger: 'blur'
				}],
				phoneNum: [{
					required: true,
					message: '请输入手机号码',
					trigger: 'blur'
				}],
			},
			uploadUrl: 'https://your-upload-url.com'
		};
	},
	onLoad() {
		this.getUserInfo()
	},
	onPullDownRefresh() {
		this.getUserInfo()
	},
	methods: {
		appFinish() {
			this.$utils.appFinish(this)
		},
		goBack() {
			uni.navigateBack();
		},
		async getUserInfo() {
			const params = {
			}
			const res = await this.$request(this.$Api.getUserInfo, params, "get")
			if(res.data.code!=200)return
			console.log('res', res)
			const {
				avatar,
				nickname,
				mobile,
			} = res.data.data;
			this.formData.avatar = avatar
			this.formData.name = nickname
			this.formData.phoneNum = mobile
			this.isShowPhonePop = false
			uni.stopPullDownRefresh()
		},
		showAvatarPop(img) {
			console.log('showAvatarPop')
			this.isShowAvatarPop = true
			// uni.previewImage({
			// 	current: 0,
			// 	urls: [img]
			// });
		},
		closeAvatarPop() {
			this.isShowAvatarPop = false
		},
		showPhonePop() {
			return
			console.log('showPhonePop')
			this.$refs.bindPhonePopRef.formData.oldPhone = this.formData.phoneNum
			this.isShowPhonePop = true
		},
		closePhonePop() {
			this.isShowPhonePop = false
		},
		showNamePop() {
			console.log('showNamePop')
			this.isShowNamePop = true
		},
		closeNamePop() {
			console.log('closeNamePop')
			this.isShowNamePop = false
		},
		confirmNamePop(params) {
			this.formData.name = params
			this.isShowNamePop = false
		},

		confirmName() {
			console.log('confirmName')
			this.isShowNamePop = false
		},
		// 上传图片
		choosePic(type) {
			const vm = this
			if (type == 1) {
				this.$utils.androidCamera(this)
			} else {
				this.$utils.androidAlbum(this)
			}
			console.log('点击到上传图片')
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: async (res1) => {
					const file = res1.tempFiles[0];
					const params = {
						scene: 'business_avatar'
					}
					txCosUpload(file, params, (progressData) => {
						// 实现进度条，目前没用到
						console.log(123, Math.round(progressData.percent * 100))
					},).then(res => {
						uni.showToast({
							title: '图片上传成功',
							icon: 'none',
							duration: 1500
						})
						vm.formData.avatar = res.fileUrl
						this.isShowAvatarPop = false
					})
					console.log('上传图片success', res1)
				},
				fail: (res) => {
					console.log('上传图片fail', res)
				}
			});
		},

		async submitForm() {
			console.log('submitForm', this.$utils);
			let orgId = await this.$utils.getOrgId(this)
			const params = {
				avatar: this.formData.avatar,
				nickname: this.formData.name,
				email: '',
				birthday: '',
				sex: 0,
				orgId: orgId,
			}
			const res = await this.$request(this.$Api.updateUserInfo, params, "post")

			uni.showToast({
				title: '更改成功',
				icon: 'none'
			});
		},
	}
};
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	// height: 992rpx;
	overflow-y: hidden;
	overflow: hidden;
	// position: relative;
	height: 100vh;
	background: url('@/static/image/my_set_bg.png') no-repeat center center;
	background-size: cover;
	background-color: #fafbff;
	// background-color: #fafbff;
	// .custom_item{
	// 	width: 522rpx;
	// 	input{
	// 		width: 522rpx;
	// 	}
	// }

	::v-deep .u-navbar__content__left__text {
		font-weight: 500;
		font-size: 32rpx;
	}

	.avatar-form-item {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		float: right;
	}

	.avatar-box {
		width: 80rpx;
		height: 80rpx;
	}

	.pop-container {
		font-size: 34rpx;
		color: #000000;
		text-align: center;
		background-color: #F2F2F2;

		.pop-item {
			padding: 32rpx 0;
			background-color: #FFFFFF;
			margin-bottom: 2rpx;
		}

		.pop-cancel-item {
			background-color: #FFFFFF;
			padding: 32rpx 0;
			margin-top: 16rpx;
		}
	}

	.form_container {
		// background-color: red;
		background-color: #fafbff;
		margin: 32rpx;
		height: 100vh;
		margin-top: 96rpx;
		border-radius: 16rpx;
		// padding-top: 32rpx;

		.form_box {
			background-color: #ffffff;
			border-radius: 16rpx;
			
		}
		.divider {
			border-bottom: 1rpx solid #E3E8EE;
			margin: 30rpx 0;
		}

		.u-form {
			padding: 40rpx;
			border-radius: 16rpx;
			// flex: 1;
			// height: 100vh;
			background-color: #ffffff;

			::v-deep .u-form-item__body {
				padding: 10rpx 0;
			}

			::v-deep .u-form-item__body__left__content__required {
				left: -1px;
			}
		}


	}

	.custom_btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: fit-content;
		padding: 14rpx 32rpx;
		text-align: center;
		border: 2rpx solid #295EFF;
		border-radius: 8rpx;
		color: #295EFF;
		font-size: 28rpx;
		font-weight: 400;

		image {
			width: 24rpx;
			height: 24rpx;
			margin-right: 12rpx;
		}
	}

	.nav-left-text {
		color: #295FFF;
	}

	.slot-content {
		padding: 34rpx 0;
		width: 100%;
	}
	
	.previewImg-box {
		position: fixed;
		z-index: 999999;
		top: 40%;
		left: 50%;
		transform: translate(-50%,-50%);
	}

	.name-input {}

}</style>
